<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>css flex align-items 属性</title>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 40px;
    background-color: #e9f2f2;
	margin-bottom:20px;
}

.flex-container>div {
    background-color: cornflowerblue;
    width: 60px;
}

.flex-container>div:nth-child(1) {
    width: 60px;
	font-size:14px;
}
.flex-container>div:nth-child(2) {
    width: 50px;
	font-size:12px;
}
.flex-container>div:nth-child(3) {
    width: 70px;
	font-size:16px;
}
.flex-container>div:nth-child(4) {
    width: 80px;
	font-size:18px;
}

.flex-container>div:nth-child(1) {
	background-color:#9cbea0;
}
.flex-container>div:nth-child(2) {
	background-color:#9da0a4;
}
.flex-container>div:nth-child(3) {
	background-color:#8f8cb1;
}
.flex-container>div:nth-child(4) {
	background-color:#c9a8da;
}

.flex-container-1{
	-webkit-align-items: flex-start;
    align-items: flex-start;
}
.flex-container-2{
	-webkit-align-items: flex-end;
    align-items: flex-end;
}
.flex-container-3{
    -webkit-align-items: center;
    align-items: center;
}
.flex-container-4{
    -webkit-align-items: baseline;
    align-items: baseline;
}
.flex-container-5{
    -webkit-align-items: stretch;
    align-items: stretch;
}

</style>
</head>
<body style="width:500px;margin: 0 auto;">
	<code>align-items: flex-start;</code>
    <div class="flex-container flex-container-1">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>  
	  <div>item 4</div>
    </div>
	<code>align-items: flex-end;</code>
	<div class="flex-container flex-container-2">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>  
	  <div>item 4</div>
    </div>
	<code>align-items: center;</code>
	<div class="flex-container flex-container-3">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>  
	  <div>item 4</div>
    </div>
	<code>align-items: baseline;</code>
	<div class="flex-container flex-container-4">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>  
	  <div>item 4</div>
    </div>
	<code>align-items: stretch; /*default*/</code>
	<div class="flex-container flex-container-5">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>  
	  <div>item 4</div>
    </div>
</body>
</html>
